import { watchEffect } from 'vue'
import { ElLoading } from 'element-plus'
import { useCommonStore } from '@/store/common'
import { debounce } from "@/common/unite";

export default function useCommonLoading() {
  const commonStore = useCommonStore()
  let loading: any

  const debouncHideLoading = debounce(() => {
    loading && loading.close()
  }, 200)

  watchEffect(() => {
    if (commonStore.isLoading) {
       loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.2)',
      })
    } else if (!commonStore.isLoading && loading) {
      debouncHideLoading()
    }
  })
}